<template>
  <el-card style="width:98%;height: 100%; margin-top:20px ; display: flex; flex-direction: column;">
    <div style="width: 100%; margin-bottom: 20px; margin-left: 31px;">
      <el-select placeholder="请选择乘车人" style="width: 200px;margin-right: 20px;" collapse-tags v-model="search">
        <el-option v-for="item in options" :key="item.id" :label="item.customerName" :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary" plain @click="setGetAllTicketForm" :loading="loading" >查询车票</el-button>
    </div>
    <el-table :data="tableData" style="width: 95%; height: 447; margin-left: 30px;" border ref="tableData"
      :header-cell-style="{ background: '#f0f9ff', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <el-table-column label="序号" type="index" width="80">
      </el-table-column>
      <el-table-column label="日期" prop="date">
      </el-table-column>
      <el-table-column label="车次" prop="trainNumber">
      </el-table-column>
      <el-table-column label="起始站(发车时间)">
        <template slot-scope="scope">
          {{ scope.row.startStation }}({{ scope.row.startTime}})
        </template>
      </el-table-column>
      <el-table-column label="终到站(到达时间)">
        <template slot-scope="scope">
          {{ scope.row.arriveStation }}({{ scope.row.arriveTime }})
        </template>
      </el-table-column>
      <el-table-column label="乘车人" prop="customerName">
      </el-table-column>
      <el-table-column label="座位类型" prop="seatType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.seatType === 0" type="success" effect="plain">商务座</el-tag>
          <el-tag v-if="scope.row.seatType === 1" effect="plain">一等座</el-tag>
          <el-tag v-if="scope.row.seatType === 2" type="warning" effect="plain">二等座</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="price">
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger" >未支付</el-tag>
          <el-tag v-if="scope.row.status === 1" type="warning" >未出行</el-tag>
          <el-tag v-if="scope.row.status === 2" type="success" >已出行</el-tag>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>

<script>
export default {
  name: "TicketForm",

  data() {
    return {
      userInfo: '',
      options: [],
      search:'',
      listdata: [],
      loading: false
    };
  },

  methods: {
    // 获取当前账户所有乘客
    setGetAllTicketForm() {
      this.loading = true
      setTimeout(() => {
        this.getAllTicketForm()
      }, 1000)
    },
    getAllTicketForm() {
      
      this.request.get("/ticketFormVo/getAllTicketFormVoByPersonId/" + Number(this.search)).then(
        response => {
          if (response.data.code === 1) {
            this.listdata = response.data.data

            
            console.log(response.data.data);
            this.$message({
              message: '查询车票成功！',
              type: 'success',
              duration: 1000
            });
          }else {
            this.$message({
              message: '此乘客没有车票！',
              type: 'info',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error.message)
        }
      ).finally(() => {
        this.loading = false
      }
      )
    },

    getAllCustomer() {
      const findForm = {
        customerUser: this.userInfo.id
      }
      this.request.post('customer/getCustomer', findForm).then(
        response => {
          if (response.data.code === 1) {
            this.options = response.data.data
            console.log(this.options);
          }
        },
        error => {
          console.log(error.message)
        }
      )
    },
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('login_user'))
    this.getAllCustomer()
  },
  computed: {
    tableData(){
      return this.listdata
    }
  }

}
</script>

<style scoped>
::v-deep .el-table__empty-block {
  /* justify-content: center; */
  min-height: 380px;
}
</style>